<!DOCTYPE html>
<html lang="en"><!-- InstanceBegin template="F:\project\iti\Templates\main.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
	<meta charset="utf-8">
  <!-- InstanceBeginEditable name="doctitle" -->
  <title>Bootstrap 3, from LayoutIt!</title>
  <!-- InstanceEndEditable -->
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="">
  <meta name="author" content="">

	<!--link rel="stylesheet/less" href="less/bootstrap.less" type="text/css" /-->
	<!--link rel="stylesheet/less" href="less/responsive.less" type="text/css" /-->
	<!--script src="js/less-1.3.3.min.js"></script-->
	<!--append �#!watch� to the browser URL, then refresh the page. -->
	<link href="css/video-default.css" rel="stylesheet">
	<link href="css/bootstrap.min.css" rel="stylesheet">
	<link href="css/style.css" rel="stylesheet">
    <link  href="css/liquidcarousel.css" rel="stylesheet">
    <link id="colorpage" href="css/cc0000.css" rel="stylesheet">

  <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
  <!--[if lt IE 9]>
    <script src="js/html5shiv.js"></script>
  <![endif]-->

  <!-- Fav and touch icons -->
  <link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/apple-touch-icon-144-precomposed.png">
  <link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/apple-touch-icon-114-precomposed.png">
  <link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/apple-touch-icon-72-precomposed.png">
  <link rel="apple-touch-icon-precomposed" href="img/apple-touch-icon-57-precomposed.png">
  <link rel="shortcut icon"  href="img/favicon.png">
  
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/jquery.video-ui.js"></script>
	<script type="text/javascript" src="js/scripts.js"></script>
   <script type="text/javascript"   src="js/liquidcarousel.js"></script><!-- for technology -->
	<script type="text/javascript"   src="js/jquery.liquidcarousel.pack.js"></script><!-- for technology -->
   

    <script>
    			$(document).ready(
					function(){
						
						 $('#demo1').videoUI({
						  'autoHide':false,
						  'volumeMedia': 1
						}); 
					$('#liquid').liquidcarousel({
							height: 150,		//the height of the list
							duration: 100,		//the duration of the animation
							hidearrows: true	//hide arrows if all of the list items are visible
						});
						
					}
				);
    </script>
    <!-- InstanceBeginEditable name="head" -->
    <!-- InstanceEndEditable -->
</head>

<body class="gradiant">
		<div class="container top-buffer">
			<div class="row clearfix" id="header">
				<div class="col-md-6 column" id="social">
						<ul>
            				<li><a class="facebook"></a></li>
               				<li><a class="google"></a></li>
                			<li><a class="twitter"></a></li>
                			<li><a class="linkedin"></a></li>
            			</ul>
        	
				</div>
				<div class="col-md-6 column">
					<img src="img/logo.png" id="logo" />
					<ul id="color">
						<li><a class="red" onClick="page_style('red');"></a></li>
						<li><a class="blue" onClick="page_style('blue');"></a></li>
						<li><a class="green" onClick="page_style('green');"></a></li>
						<li><a class="yellow" onClick="page_style('yellow');"></a></li>
					</ul>
				</div>
			</div>
			<div class="row clearfix" id="nav">
				<div class="col-md-12 column">
					<ul class="nav nav-pills">
						<li class="active">
							<a href="#">Home</a>
						</li>
						<li>
							<a href="#">Open Source </a>
						</li>
						<li>
							<a href="#">ITI</a>
						</li>
						<li class="dropdown">
        					<a href="#" class="dropdown-toggle" data-toggle="dropdown">Cources <b class="caret"></b></a>
        					<ul class="dropdown-menu">
          						<li><a href="#">PHP</a></li>
         						<li><a href="#">Ruby</a></li>
          						<li><a href="#">Apache</a></li>
          						<li class="divider"></li>
          						<li><a href="#">oprating System</a></li>
          						<li class="divider"></li>
          						<li><a href="#">Network</a></li>
        					</ul>
      					</li>
					</ul>
				</div>
			</div><!-- end nav -->	
		
	<div class="row clearfix" >
		<div class="col-md-12 column" >
		</div>
	</div><!-- end reg -->
	<div class="row clearfix">
		<div class="col-md-12 column">

		<!-- InstanceBeginEditable name="main" -->
        <div class="col-md-12 column">
	<table>
		<tr>
			<td><img src="images/forum_logo.png" class="img-rounded" alt="Forum"/></td>
		</tr>
	</table>
	<ul class="breadcrumb">
		<li class='active'>You are here : Home</li>
	</ul>
	<table class="table table-bordered table-hover" >
		<thead>
			<tr>
				<th Style="width:50%"><a href='#'><img onclick="ShowHide('1',this)" src='images/arrow-expand.png' alt=""></a> First Category</th>	
				<th>threads</th>
				<th>Replies</th>
				<th><span>Latest post</span></th>
			</tr>
		</thead>
		<tbody id='1'>
			<tr>
				<td><a href="category.html">section 1</a><br/>Description of the section</td>
				<td><span class="badge">80</span></td>
				<td><span class="badge">90</span></td>
				<td><span><dfn>Last post </dfn> by <a href="#">Abdulrahman</a><br/>02 - Dec - 2012 9:28 pm</span></td>
			</tr>
			<tr>
				<td><a href="category.html">section 1</a><br/>Description of the section</td>
				<td><span class="badge">80</span></td>
				<td><span class="badge">90</span></td>
				<td><span><dfn>Last post </dfn> by <a href="#">Abdulrahman</a><br/>02 - Dec - 2012 9:28 pm</span></td>
			</tr>
		</tbody>
				
	</table>
	<table class="table table-bordered table-hover">
		
		<thead>
			<tr>
				<th width="50%"><a  href='##'><img onclick="ShowHide('2',this)" src='images/arrow-expand.png'></a> First Category</th>	
				<th>threads</th>
				<th>Replies</th>
				<th><span>Latest post</span></th>
			</tr>
		</thead>
		<tbody id='2'>
			<tr>
				<td><a href="category.html">section 1</a><br/>Description of the section</td>
				<td><span class="badge">80</span></td>
				<td><span class="badge">90</span></td>
				<td><span><dfn>Last post </dfn> by <a href="#">Abdulrahman</a><br/>02 - Dec - 2012 9:28 pm</span></td>
			</tr>
			<tr>
				<td><a href="category.html">section 1</a><br/>Description of the section</td>
				<td><span class="badge">80</span></td>
				<td><span class="badge">90</span></td>
				<td><span><dfn>Last post </dfn> by <a href="#">Abdulrahman</a><br/>02 - Dec - 2012 9:28 pm</span></td>
			</tr>
			<tr>
				<td><a href="category.html">section 1</a><br/>Description of the section</td>
				<td><span class="badge">80</span></td>
				<td><span class="badge">90</span></td>
				<td><span><dfn>Last post </dfn> by <a href="#">Abdulrahman</a><br/>02 - Dec - 2012 9:28 pm</span></td>
			</tr>
			<tr>
				<td><a href="category.html">section 1</a><br/>Description of the section</td>
				<td><span class="badge">80</span></td>
				<td><span class="badge">90</span></td>
				<td><span><dfn>Last post </dfn> by <a href="#">Abdulrahman</a><br/>02 - Dec - 2012 9:28 pm</span></td>
			</tr>
			<tr>
				<td><a href="category.html">section 1</a><br/>Description of the section</td>
				<td><span class="badge">80</span></td>
				<td><span class="badge">90</span></td>
				<td><span><dfn>Last post </dfn> by <a href="#">Abdulrahman</a><br/>02 - Dec - 2012 9:28 pm</span></td>
			</tr>
		</tbody>
	</table>
	<table class="table table-bordered table-hover">
		<thead>
			<tr>
				<th width="50%"><a href='##'><img onclick="ShowHide('3',this)" src='images/arrow-expand.png'></a> First Category</th>	
				<th>threads</th>
				<th>Replies</th>
				<th><span>Latest post</span></th>
			</tr>
		</thead>
		<tbody id='3'>
			<tr>
				<td><a href="category.html">section 1</a><br/>Description of the section</td>
				<td><span class="badge">80</span></td>
				<td><span class="badge">90</span></td>
				<td><span><dfn>Last post </dfn> by <a href="#">Abdulrahman</a><br/>02 - Dec - 2012 9:28 pm</span></td>
			</tr>
			<tr>
				<td><a href="category.html">section 1</a><br/>Description of the section</td>
				<td><span class="badge">80</span></td>
				<td><span class="badge">90</span></td>
				<td><span><dfn>Last post </dfn> by <a href="#">Abdulrahman</a><br/>02 - Dec - 2012 9:28 pm</span></td>
			</tr>
			<tr>
				<td><a href="category.html">section 1</a><br/>Description of the section</td>
				<td><span class="badge">80</span></td>
				<td><span class="badge">90</span></td>
				<td><span><dfn>Last post </dfn> by <a href="#">Abdulrahman</a><br/>02 - Dec - 2012 9:28 pm</span></td>
			</tr>
			<tr>
				<td><a href="category.html">section 1</a><br/>Description of the section</td>
				<td><span class="badge">80</span></td>
				<td><span class="badge">90</span></td>
				<td><span><dfn>Last post </dfn> by <a href="#">Abdulrahman</a><br/>02 - Dec - 2012 9:28 pm</span></td>
			</tr>
			<tr>
				<td><a href="category.html">section 1</a><br/>Description of the section</td>
				<td><span class="badge">80</span></td>
				<td><span class="badge">90</span></td>
				<td><span><dfn>Last post </dfn> by <a href="#">Abdulrahman</a><br/>02 - Dec - 2012 9:28 pm</span></td>
			</tr>
		</tbody>	
	</table>
</div>
	<div class="col-md-12 column">
		<table class="table table-bordered table-hover">
			<thead>
				<tr>
					<th>WHO IS ONLINE</th>	
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>
						<p>In total there are 8 users online : <a href="#">Abdulrahman</a> , <a href="#">Mona Sa2awya</a> , <a href="#">Mostafa Sayed</a> , <a href="#">Beshoy Smsm</a> and 4 guests</p><br> Most users ever online was on 1 january 2014.
					</td>
				</tr>
			</tbody>
		</table>
	</div>
	<div class="col-md-12 column">
		<table class="table table-bordered">
			<thead>
				<tr>
					<th>Statistics</th>	
				</tr>
			</thead>
			<tbody>
				<tr>
					<td><p>Total posts 45 :: Total topics 35 :: Total members 79692 :: Our newest member Richardpeva</p></td>
				</tr>
			</tbody>
		</table>

</div>
<p><center>Copyrights &copy; are reserved OpenSource Department<br>All Times are CLT (GMT +2)</center><p>
		
		
		
		<!-- InstanceEndEditable -->
            	
		</div>
	</div><!-- end collection -->
					<div id="footet">
				<footer>
					<div id="footer-widgets">
						<div class="width-container footer-4-column">
							<div id="text-2" class="widget ">
								<h5>About us</h5>
								<div class="textwidget">
									<p class="form-control-static">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
								</div>
							</div>
							<div id="blog_subscription-2" class="widget jetpack_subscription_widget">
								<h5 class="widget-title"><label for="subscribe-field">Subscribe via Email</label></h5>
								<form action="" method="post" accept-charset="utf-8" id="subscribe-blog-blog_subscription-2">
									<p id="subscribe-text">Enter your email address to subscribe to our website and receive notifications of news by email.</p>
									<p id="subscribe-email"><input class="form-control" type="text" name="email" style="width: 95%; padding: 1px 2px"  placeholder="subscribe" id="subscribe-field"/></p>
									<p id="subscribe-submit">
										<input type="submit" class="btn btn-primary" id="subscribe" value="Subscribe"  />
									</p>
								</form>		
							</div>
							<div id="nav_menu-2" class="widget widget_nav_menu">
								<h5 class="widget-title">More About Us</h5>
								<div class="menu-main-navigation-container">
									<ul id="menu-main-navigation-1" class="menu">
										<li><a>Home</a></li>
										<li><a>Home</a></li>
										<li><a>Home</a></li>
										<li><a>Home</a></li>
										<li><a>Home</a></li>
										<li><a>Home</a></li>
									</ul>
								</div>
							</div>
							<div class="clearfix"></div>
						</div><!-- close .width-container -->
					</div><!-- close #footer-widgets -->
		
					<div class="width-container">		
						<div id="copyright">&copy; 2014 All Rights Reserved.</div>		
						<div class="clearfix"></div>
					</div><!-- close .width-container -->
				</footer>
			</div>

		</div>
	<script>
		function page_style(color){
		var link = document.createElement('link');
		document.getElementById("colorpage").remove();
		link.rel = "stylesheet";
		link.type = "text/css";
		link.id = "colorpage";

			switch (color)
			{
					case 'red':
							link.href = "css/cc0000.css";				
					break;
					case 'green':
							link.href = "css/4dc081.css";
					break;
					case 'blue' :
							link.href = "css/2e75b6.css";
					break;
					case 'yellow':
						link.href = "css/ffc000.css";
					break;
			}
	
		document.head.appendChild(link);
		}
	</script>

</body>
<!-- InstanceEnd --></html>
